body {
    min-width : 320px;
    max-width : 750px;
    margin    : 0 auto;
    background: #F5F5F5;
    width     : 100vw;
    height    : 100vh;
    position  : relative;
}





// 约束当屏幕大于750px时 html字体大小就不变化
@media screen and (min-width:750px) {
    html {
        font-size: 37.5px !important;
    }
}


ul li {
    list-style: none;
}

/*这里设置动画blink*/
@keyframes blink {

    0%,
    100% {
        background-color: #000;
        color           : #aaa;
    }

    50% {
        background-color: transparent;
        /* not #aaa because it's seem there is Google Chrome bug */
        color           : transparent;
    }
}

.success_pay {
    padding: 0.853333rem;

    .site_wrap {
        display        : flex;
        justify-content: flex-start;
        align-items    : center;

        img {
            width        : 1.76rem;
            height       : 1.76rem;
            object-fit   : cover;
            margin-right : 0.426667rem;
            border-radius: 50%;
        }

        h2 {
            color       : #1A1A1A;
            font-size   : 0.853333rem;
            margin-right: 0.266667rem;
        }

        span {
            display        : flex;
            justify-content: center;
            align-items    : center;
            color          : #25B11C;
            font-size      : 0.693333rem;
            text-align     : center;
            width          : 3.2rem;
            height         : 0.986667rem;
            border-radius  : 0.186667rem;
            border         : 1px solid #25B11C;
        }
    }

    .pay_content {
        margin-top   : 1.28rem;
        padding      : 0.8rem;
        background   : #fff;
        border-radius: 0.32rem;

        .pay_input {
            padding        : 0.266667rem 0;
            border-bottom  : 1px solid #CCCCCC;
            display        : flex;
            justify-content: flex-start;
            align-items    : flex-end;
            height         : 2.773333rem;

            span {
                color       : #1A1A1A;
                font-size   : 1.333333rem;
                font-weight : bold;
                margin-right: 0.266667rem;
            }

            .relative_box {
                position: relative;
                width   : 16.426667rem;
                height  : 2.773333rem;

                .cursor_blink {
                    position: absolute;
                    left    : 0;
                    display : inline-block;
                    width   : 0.053333rem;
                    height  : 2.773333rem;

                    img {
                        height: 2.773333rem;
                    }
                }
            }

            .point-focus {
                width      : 100%;
                border     : none;
                outline    : none;
                color      : #1A1A1A;
                font-size  : 2.4rem;
                height     : 2.773333rem;
                font-weight: bold;
                overflow-y : scroll;
            }
        }

        ul.dj_ky {
            padding-top    : 0.853333rem;
            display        : flex;
            justify-content: flex-start;

            li {
                font-size   : 0.746667rem;
                color       : #323232;
                margin-right: 0.533333rem;
            }

            li.c_gray {
                color: #999999;
            }
        }


    }

    .pay_notice {
        margin-top     : 0.64rem;
        display        : flex;
        justify-content: flex-start;
        align-items    : center;
        padding        : 0.533333rem 2.24rem;
        background     : #fff;
        border-radius  : 0.32rem;

        .left_img {
            width       : 3.413333rem;
            height      : 3.413333rem;
            overflow    : hidden;
            margin-right: 0.906667rem;

            img {
                width: 100%;
            }
        }

        .right_text {

            p {
                font-size    : 0.693333rem;
                color        : #323232;
                margin-bottom: 0.16rem;
            }

            .bm {
                display        : flex;
                justify-content: flex-start;
                align-items    : center;
                font-size      : 0.693333rem;
                color          : #323232;

                i {
                    color     : #FF6362;
                    font-style: normal;
                }

                img {
                    display: inline-block;
                    margin : 0.106667rem;
                }
            }
        }
    }
}


/* 新键盘 */
.keyboard_wrap {
    position         : absolute;
    left             : 50%;
    bottom           : 0;
    width            : 100%;
    height           : auto;
    z-index          : 12;
    -webkit-transform: translateX(-50%);
    transform        : translateX(-50%);
    background       : #fff;
}

.keyboard_box {
    display        : flex;
    justify-content: space-between;
}

.row_wrap {
    flex           : 1;
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
    align-items    : center;

    .number {
        width          : 100%;
        font-size      : 1rem;
        display        : flex;
        justify-content: center;
        align-items    : center;
        height         : 3.2rem;
        box-sizing     : border-box;
        border-right   : 1px solid #e1e1e1;
        border-bottom  : 1px solid #e1e1e1;
    }

    .numbers {
        width          : 100%;
        font-size      : 0.746667rem;
        display        : flex;
        justify-content: center;
        align-items    : center;
        height         : 3.2rem;
        box-sizing     : border-box;
        border-right   : 1px solid #e1e1e1;
        border-bottom  : 1px solid #e1e1e1;

        img {
            width: 30%;
        }
    }

    .remove {
        width          : 100%;
        font-size      : 0.746667rem;
        display        : flex;
        justify-content: center;
        align-items    : center;
        height         : 3.2rem;
        box-sizing     : border-box;
        border-right   : 1px solid #e1e1e1;
        border-bottom  : 1px solid #e1e1e1;

        img {
            width         : 30%;
            pointer-events: none;
        }
    }
}


/* 确认支付 */

.paynow {
    width          : 100%;
    height         : 9.6rem;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    border-right   : 1px solid #e1e1e1;
    border-bottom  : 1px solid #e1e1e1;
    color          : #fff;
    background     : #07c160;
}

.paynow span {
    display  : block;
    font-size: 1.066667rem;
}


.mask {
    position        : fixed;
    top             : 0;
    left            : 0;
    z-index         : 99;
    width           : 100%;
    height          : 100%;
    background-color: #000;
    opacity         : 0.4;
    display         : none;
}

// 弹框订单


.popup {
    display         : none;
    width           : 100%;
    padding         : 0.266667rem 0;
    position        : absolute;
    bottom          : 0;
    background-color: #fff;
    z-index         : 999;

    .popup-title {
        width        : 90%;
        margin       : 0 auto;
        display      : flex;
        align-items  : center;
        border-bottom: 1px solid #e5e5e5;
        padding      : 0.266667rem 0;

        a {
            width          : 0.8rem;
            height         : 0.8rem;
            background     : url(../images/close.png) no-repeat;
            background-size: 0.8rem auto;
        }

        span {
            flex      : 1;
            font-size : 1.2rem;
            text-align: center;
            color     : #333333;
        }
    }

    .popup-points {
        margin: 0 auto;
        width : 90%;

        ul {
            margin-top: 0.533333rem;

            li {
                display        : flex;
                justify-content: space-between;
                padding        : 0.533333rem 0;

                span {
                    color    : #616161;
                    font-size: 0.7rem;
                }
            }
        }
    }

    .popup-btn {
        width      : 90%;
        margin     : 0 auto;
        padding    : 1.333333rem 0;
        padding-top: 0.533333rem;

        .btn-wrap {
            display        : flex;
            justify-content: space-between;
            align-items    : center;
            padding        : 0 0.266667rem;

            p {
                margin   : 0;
                flex     : 1;
                color    : #636363;
                font-size: 1.5rem;
            }

            button {
                display        : flex;
                justify-content: center;
                align-items    : center;
                font-size      : 1rem;
                border         : none;
                width          : 5.333333rem;
                height         : 2.666667rem;
                background     : #1EAD15;
                border-radius  : 0.48rem;
                color          : #ffffff;
            }
        }
    }
}


// 支付成功
.pay_success_wrap {
    min-height: 100vh;
    background: #FAFAFA;
    padding   : 0 0.88rem;
    ;

    .pay_img_box {
        padding-top    : 0.96rem;
        display        : flex;
        justify-content: center;
        align-items    : center;
        flex-direction : column;

        img {
            display: block;
            border : none;
            width  : 7.2rem;
            height : 7.973333rem;
        }

        h2 {
            margin-top: 0.213333rem;
            font-size : 0.96rem;
            color     : #45AE3D;
        }
    }

    .ul {
        padding        : 1.066667rem 0;
        border-bottom  : 1px solid #CCCCCC;
        display        : flex;
        flex-wrap      : wrap;
        justify-content: center;
        align-items    : center;

        .li {
            width          : 50%;
            flex-shrink    : 0;
            padding        : 0.666667rem;
            box-sizing     : border-box;
            display        : flex;
            flex-direction : column;
            justify-content: center;
            align-items    : center;

            h3 {
                color        : #999999;
                font-size    : 0.8rem;
                margin-bottom: 0.426667rem;
            }

            p {
                color      : #323232;
                font-size  : 0.853333rem;
                font-weight: bold;
            }
        }
    }

    .watch {
        padding        : 2.72rem 0;
        display        : flex;
        justify-content: center;
        align-items    : center;

        .border_wrap {
            width          : 18.453333rem;
            padding        : 0.4rem 1.2rem;
            background     : #f3fbf4;
            display        : flex;
            justify-content: flex-start;
            align-items    : center;

            .wx_img {
                flex-shrink: 0;
                width      :3.2rem;
                padding    : 0.266667rem;
                background : #fff;
                overflow   : hidden;
                margin-right: 0.693333rem;
                img {
                    width: 100%;
                }
            }

            .border_text {
                display: flex;
                justify-content: flex-start;
                flex-wrap: wrap;
                align-self: center;
                .text {
                    font-style: normal;
                    font-size  : 0.64rem;
                    color      : #206241;
                }
                .img_hanle{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    img{
                        width: 0.906667rem;
                        height: 0.693333rem;
                        display: inline-block;
                        margin-right: 0.32rem;
                    }
                }
                
            }
        }
    }
}